<template>
  <div class="cloud-service">
    <!-- search condition -->
    <Row>
      <Col :span="18">
        
        <Input  placeholder="请输入人员姓名或手机号码" style="width: 200px" >
          <!-- <span slot="append">查询</span> -->
        </Input>
        <Button type="primary">查询</Button>
        </Col>
        <Col :span="6" class="text-right">
        
        <Button type="warning" @click="modal1=true">
          <Icon type="md-add"/>
          新建人员</Button>
      </Col>
    </Row>
    <!-- tables -->
    <div class="mt10">
      
        <Table border stripe :columns="columns1" :data="data1">
          <template slot-scope="{ row, index }" slot="action">
            <Icon type="ios-paper c1" size="22" title="查看" @click="viewDetail(row)"/> 
            <Icon type="ios-create c5" size="22" title="修改" /> 
            <Icon type="ios-trash c7" size="22" title="删除" @click="deleteHandle(row, index)" /> 
          </template>
        </Table>
    
    </div>
      
     <div class="page mt20">
       <Page :total="100" show-sizer show-total/>
     </div> 
     
      <!-- dialog -->
     <Modal v-model="modal1" width="400" title="新建人员">
       <div class="">
          姓&nbsp;&nbsp;&nbsp;名：
          <Input type="text" style="width:300px;"></Input>
       </div>
       <div class="mt20">
          手机号：
          <Input type="text" style="width:300px;"></Input>
       </div>
       <div class="mt20">
          单&nbsp;&nbsp;&nbsp;位：
          <Input type="text" style="width:300px;"></Input>
       </div>
       <div class="mt20">
          单位地址：
          <Input type="text" style="width:300px;"></Input>
       </div>
       <div class="mt20">
          家庭地址：
          <Input type="text" style="width:300px;"></Input>
       </div>
       <div class="mt20">
          邮箱地址：
          <Input type="text" style="width:300px;"></Input>
       </div>
       
      
       <div slot="footer" class="text-center">
         <Button type="primary" size="large" @click="modal1=false">确认</Button>
       </div>
     </Modal>
     <!-- modalDetail -->
     <Modal v-model="modalDetail" width="400" title="人员详情" footer-hide>
       <ul class="table-wrap">
         <li>
           <div class="label">姓名</div><div class="text">里斯本</div>
         </li>
         <li>  
           <div class="label">手机号</div><div class="text">里斯本</div>
         </li>
         <li>
           <div class="label">单位</div><div class="text">里斯本</div>
         </li>
         <li>
           <div class="label">单位地址</div><div class="text">里斯本里斯本里斯本里斯本里斯本里斯本</div>
         </li>
         <li> 
           <div class="label">家庭地址</div><div class="text">里斯本</div>
         </li>
         <li>
           <div class="label">邮箱地址</div><div class="text">里斯本</div>
          </li> 
       </ul>
     </Modal>
  </div>
</template>

<script>
export default {
  mounted () {
    this.$store.commit('UPDATE_POSITION', this.position)
  },
  data (){
    return {
      modal1: false,
      modalDetail: false,
      position:[
        {title: '我的团队', link:'/admin/myTeam'},
        {title: '云通讯录'}
      ],
      columns1: [
        {title: '序号', key: 'id'},
        // {title: '工号', key: 'address'},
        { title: '姓名', key: 'address'},
        { title: '手机', key: 'address'},
        { title: '单位', key: 'address'},
        { title: '操作', slot: 'action', width: 200, align: 'center'},
       ],
       data1:[
         {
           id: '103232',
           'address': 'fsdfsdfdsf'
         },
         {
           id: '103232',
           'address': 'fsdfsdfdsf'
         },
         {
           id: '103232',
           'address': 'fsdfsdfdsf'
         },
         {
           id: '103232',
           'address': 'fsdfsdfdsf'
         },
         {
           id: '103232',
           'address': 'fsdfsdfdsf'
         },
         
       ],
       cityList:[
         {label:'全部', value: 1}
       ]
    }
  },
  methods:{
    gotoDetail (item) {
      this.$router.push(`buyDetail?id=${item.id}`)
    },
    viewDetail (row) {
      this.modalDetail = true
    },
    deleteHandle(row, index) {
      let that = this
      this.$Modal.confirm({
        title: '警告',
        content: '真要删除此记录吗?',
        onOk () {
          that.data1.splice(index, 1)
          that.$Message.success('删除成功')
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.table-wrap{
  overflow: hidden;
  li{
    line-height: 40px;
    text-align: center;
    margin-bottom: 4px;
    .label{
      float: left;
      width: 120px;
      background: #f5f5f5;
  }
    .text{
      padding-left: 120px;
    }
  }
}
</style>
